/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 29; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    max-height:100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    
}



/* Modal Content/Box */
.modal-content {
    position:relative;
    background-color: #fefefe;
    /* 5% from the top, 15% from the bottom and centered */
    border: 6px solid #ddd;
  /*  width: 100%; 
    max-height:600px !important;
    max-width:500px;*/
    max-width:80%;
    width:600px;

    margin: 5% auto 0 auto; 
/*    margin: 5% auto 15% auto; */

    padding:15px;
        -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
    
}

.modal-content .modal-icerik{
   border:0px solid #770000;
   position:relative;

  -webkit-touch-callout:initial !important; /* iOS Safari */
    -webkit-user-select:text !important; /* Safari */
     -khtml-user-select:text !important; /* Konqueror HTML */
       -moz-user-select:text !important; /* Firefox */
        -ms-user-select:text !important; /* Internet Explorer/Edge */
            user-select:text !important; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
   
}


.OklarDisCercevesi{
    border:0px solid #ff0000;
    position:relative;
}



.OklarDisCercevesi .Oklar{
    width: 30%;
    min-width:120px;
    height: calc(100%);
    display: block;
    position: absolute;
    top:0px;
	opacity: 0.3;
    z-index: 1;
    cursor: pointer;
    border:0px solid #f44336;
    transition: opacity .2s;

}
.OklarDisCercevesi .Oklar div{
    position:relative;
    top:calc(40% - 70px);
}

.OklarDisCercevesi .Oklar div label{
    /*width: 150px;
    height: calc(100% - 30px);*/
    display: block;
    position: absolute;
	opacity: 1.0;
    z-index: 1;
    cursor: pointer;
    border:0px solid #4CAF50;
    transition: opacity .2s;

    color: rgba(0, 0, 0, 0.6);
    font-size: 140px;
    font-weight:bolder;
    text-align: left;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .0);
    text-shadow: 5px 5px 5px rgb(119, 119, 119);
}
.OklarDisCercevesi .Oklar label.sonraki2 {
    right: 20px !important;
    text-align: right;
}

.modal-content:hover + .OklarDisCercevesi .Oklar { opacity: 0.5; }

.OklarDisCercevesi .Oklar:hover { opacity: 0.9; }

.modal-icerik .sonraki {
    right: 0;
    text-align: right;
}

    .modal-content .BaslikDivi {
        
        font-size:20px;
        font-weight:bold;
       /* text-shadow:1px 1px 2px rgba(85, 85, 85, 0.8);
        text-shadow:1px 2px 1px rgba(100, 100, 100, 0.6);*/
        color:#000;
        padding-left:40px;
        padding-right:40px;
        color:#656565;
        text-align:center;
        min-height:36px;
         /*padding-bottom:20px;
       */
        border:0px solid #000;
        
    }
.modal-content .BaslikDivi .ZorluklarDivi{
	display:inline-block;
    position:relative;
    top:-5px;
    margin:3px;
    margin-right:15px;
    padding:3px 15px ;
    min-width:100px;
    color:#fff;
    text-shadow:1px 1px 1px rgba(0, 0, 0, 0.59);
    text-align:center;
    border:1px solid #000;
    font-size:13px;
    font-weight:normal;
	/*border: 1px solid rgba(230,0, 0,1);*/
}


.modal-content .islemyapiliyor{
     display: none; /*Hidden by default */
    position: absolute; /* Stay in place */
    z-index: 26; /* Sit on top */

/*    left: 10px;
    top: 10px;
    width: calc(100% - 20px); 
    height: calc(100% - 20px); 
    */

    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%; 
    border:0px solid #555;


    overflow: hidden; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
    color:#fff;
    text-shadow:1px 1px 3px #000;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size:32px;
    text-align:center;
    padding-top:50px;

}

.modal-content .KapatDugmesiislemYapiliyor{
    display: none;
    position: absolute;
    top:-15px;
    right:-15px;
    width:40px;
    height:40px;
    border:0px solid rgba(0,0,0,0.2);
    background-color: rgba(0,0,0,0.2);
    border-radius:30px;
    cursor:pointer;
    overflow:hidden;   
    color: #000;
}


/* The Close Button (x) */
.KapatDugmesiModalPencere{
    text-align: center;
    position: absolute;
    top:-15px;
    right:-15px;
    width:40px;
    height:40px;
    border:6px solid #ccc;
    background-color:#fff;
    border-radius:30px;
    cursor:pointer;
    overflow:hidden;   
    color: #000;
}

.ModalPencereKapatCarpi {
    font-size: 40px;
    font-weight: bold;
    text-shadow:1px 1px 1px #666;
    position:relative;
    top:-15px;
    cursor: pointer;
}

.KapatDugmesiModalPencere:hover {
    background-color:#555;
    color: #ff0000;
}

.KapatDugmesiModalPencere:active {
    top:-13px;
}

/* Add Zoom Animation */
.PencereAnimasyonu {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}
    
@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}






/********************************************************************/
/****************** Ürün SaTışları ***************************/
/********************************************************************/
.UrunSecBaslik{
    font-weight:bold;
    
}

.Urungoruntuleme{
    display:inline-block;
    padding:5px;
    margin:2px;
    border:1px solid #ccc;
    background-color:#fff;
    
    max-width:250px;
    border-radius:4px;
    box-sizing:border-box;
    cursor:pointer;
    box-shadow:0px 0px 3px rgba(100,100,100,0.4);
}

.Urungoruntuleme:hover {
    box-shadow:0px 0px 10px rgba(100,100,100,0.6);
  /*  background-color:#98def8;*/
}
    .Urungoruntuleme.SeciliUrun {
        border:1px solid #7b96a0;
        background-color:#acd1de;

     }
.Urungoruntuleme .UrunBaslik{

    text-align:center;
    font-weight:bold;
    color:#1380a7;
    margin-bottom:5px;
}
.Urungoruntuleme .UrunAciklama{

}

.Urungoruntuleme .UrunFiyat{
    text-align:center;
    font-weight:bold;
    color:#116ecf;
    font-size:18px;
}
.Urungoruntuleme .UrunFiyat.Ucretsiz{
    color:#4CAF50;
}



@media (max-width:400px){
    .Urungoruntuleme{
        width:100%;
       

    }
}

@media (min-width:401px){
    .Urungoruntuleme{
        width:calc(50% - 4px);
        

    }
}